<template>
    <div class="container">
        <div style="padding: 10px 0">
            <div style="padding: 15px; border: 1px solid #eee">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/article' }">文章列表</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ titleText }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!-- <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon" v-if="modelList.cover.request">*</span>{{ modelList.cover.name }}:</div>
                </el-col>
                <el-col :span="21">
                    <img-upload :img-url.sync="modelList.cover.value"></img-upload>
                    <p style="color: red">图片规格：750*340，大小300kb以内(格式：jpg,jpeg,png,gif,bmp)</p>
                </el-col>
            </el-row>
        </div> -->
        <!-- <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title">
                        <span class="mast-icon" v-if="modelList.video_path.request">*</span>{{ modelList.video_path.name }}:
                    </div>
                </el-col>
                <el-col :span="21">
                    <div style="position: relative; width: 340px" v-if="modelList.video_path.value">
                        <span class="del-video-btn"
                            ><el-button @click="delVideo" type="danger" icon="el-icon-delete" circle></el-button
                        ></span>
                        <video :src="videoLoadSrc + modelList.video_path.value" style="width: 300px; height: 160px" controls></video>
                    </div>
                    <el-upload
                        class="avatar-uploader"
                        :action="videoLoadPath"
                        :show-file-list="false"
                        :on-success="videoHeaderSuccess"
                        :before-upload="videoHeaderUpload"
                    >
                        <el-button type="warning" icon="el-icon-upload2" size="medium">上传</el-button>
                    </el-upload>
                    <p style="color: red">视频规格：小于50M(格式：mp4、mpeg、mov、m4v、3gp、avi、m3u8)</p>
                </el-col>
            </el-row>
        </div> -->
        <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon" v-if="modelList.title.request">*</span>{{ modelList.title.name }}:</div>
                </el-col>
                <el-col :span="8">
                    <el-input v-model="modelList.title.value" :placeholder="modelList.title.placeholder"></el-input>
                </el-col>
            </el-row>
        </div>
        <!-- <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
            <div class="list-title"><span class="mast-icon" v-if="modelList.recommend_type.request">*</span>{{modelList.recommend_type.name}}:</div>
        </el-col>
        <el-col :span="21">
          <el-radio-group v-model="modelList.recommend_type.value">
              <el-radio :label="0">默认</el-radio>
              <el-radio :label="1">推荐到首页</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
    </div> -->
        <!-- <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title">
                        <span class="mast-icon" v-if="modelList.cate_id.request">*</span>{{ modelList.cate_id.name }}:
                    </div>
                </el-col>
                <el-col :span="21">
                    <el-cascader
                        v-model="cateListIds"
                        :options="cateList"
                        :props="{ value: 'id', label: 'title', children: 'children' }"
                        @change="getCateIds"
                    ></el-cascader>
                </el-col>
            </el-row>
        </div> -->
        <!-- <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon" v-if="modelList.sort.request">*</span>{{ modelList.sort.name }}:</div>
                </el-col>
                <el-col :span="21">
                    <el-input v-model="modelList.sort.value" :placeholder="modelList.sort.placeholder" type="number"></el-input>
                    <p style="color: red">输入整数,数字越大排名越靠前</p>
                </el-col>
            </el-row>
        </div> -->
        <!-- <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon" v-if="modelList.status.request">*</span>禁用/启用:</div>
                </el-col>
                <el-col :span="21">
                    <el-switch v-model="modelList.status.value" active-text="禁用" inactive-text="启用"> </el-switch>
                </el-col>
            </el-row>
        </div> -->
        <!-- <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title">
                        <span class="mast-icon" v-if="modelList.description.request">*</span>{{ modelList.description.name }}:
                    </div>
                </el-col>
                <el-col :span="21">
                    <el-input
                        v-model="modelList.description.value"
                        :placeholder="modelList.description.placeholder"
                        :rows="6"
                        type="textarea"
                    ></el-input>
                </el-col>
            </el-row>
        </div> -->
        <div class="list-group">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon" v-if="modelList.type.request">*</span>跳转类型:</div>
                </el-col>
                <el-col :span="19">
                    <div style="padding-top: 10px">
                        <el-radio-group v-model="modelList.type.value">
                            <!-- <el-radio :label="0">无跳转</el-radio> -->
                            <el-radio :label="1">详情内容</el-radio>
                            <!-- <el-radio :label="2">公众号链接</el-radio> -->
                        </el-radio-group>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="list-group" v-show="modelList.type.value > 0">
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="list-title"><span class="mast-icon">*</span>跳转内容:</div>
                </el-col>
                <el-col :span="19">
                    <div v-show="modelList.type.value == 1">
                        <vue-editor :content="modelList.content.value" ref="myTextIntro"></vue-editor>
                    </div>
                    <div v-show="modelList.type.value == 2">
                        <el-input v-model="modelList.path.value" placeholder="请输入url"></el-input>
                        <p style="padding: 6px; font-size: 12px; color: red">(关联公众号文章,必须https开头，如：https:www)</p>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="list-group" v-if="!judge" style="display: flex; flex-direction: row; justify-content: center; margin-top: 40px">
            <el-button size="medium" @click="cancel" style="margin-right: 40px">取 消</el-button>
            <el-button size="medium" type="primary" @click="preserve">确 定</el-button>
        </div>
    </div>
</template>

<script>
import api from '@/api/index';
import imgUpload from '@/components/views/commons/ImgUpload';
import vueEditor from '@/components/views/commons/VueUeditorWrap';
export default {
    name: 'positionAdd',
    components: {
        vueEditor,
        imgUpload
    },
    data: function () {
        return {
            zzTypeist: [],
            cateIdArr: [],
            cateListIds: [],
            tags: [],
            tagsVal: '',
            tagsShwo: false,
            gridData: [],
            imgLoadPath: api.API_PATH + api.LOGIN_IMG,
            videoLoadPath: api.API_PATH + api.UPLOAD_VIDEO,
            docLoadPath: api.IMG_PATH,
            videoLoadSrc: api.VIDEO_PATH,
            pageName: '',
            createTime: '',
            ht_names: '',
            createPerson: '',
            modelList: {
                cover: { value: '', request: false, name: '文章封面', placeholder: '请上传文章封面', type: 'input' },
                video_path: { value: '', request: false, name: '文章视频', placeholder: '请上传文章视频', type: 'input' },
                title: { value: '', request: true, name: '文章名称', placeholder: '请填写文章名称', type: 'input' },
                cate_id: { value: '', request: false, name: '分类', placeholder: '请选择分类', type: 'input' },
                description: { value: '', request: false, name: '文章描述', placeholder: '请输入文章描述', type: 'input' },
                recommend_type: { value: '', request: false, name: '推荐小程序位置', placeholder: '请选择推荐小程序位置', type: 'input' },
                content: { value: '', request: false, name: '文章详情', placeholder: '请输入文章详情', type: 'input' },
                sort: { value: '', request: false, name: '排序', placeholder: '请输入排序', type: 'input' },
                status: { value: false, request: false, name: '是否启用', placeholder: '请输入排序', type: 'input' },
                type: { value: 1, request: false, name: '跳转类型', placeholder: '请选择跳转类型', type: 'input' },
                path: { value: '', request: false, name: '跳转链接', placeholder: '请输入跳转链接', type: 'input' }
            },
            judge: false,
            titleText: '',
            id: '',
            type: '',
            title: '',
            roomLists: [],
            provinceList: [],
            companyList: [],
            followList: [],
            cateList: [],
            routerPath: '',
            name_zs: '',
            parentPage: 0
        };
    },
    watch: {
        'modelList.type.value': function (val) {
            if (val === 0) {
                this.modelList.content.request = false;
                this.modelList.path.request = false;
            } else if (val === 1) {
                this.modelList.content.request = true;
                this.modelList.path.request = false;
            } else if (val === 2) {
                this.modelList.content.request = false;
                this.modelList.path.request = true;
            }
        }
    },
    mounted() {
        this.id = this.$route.query.id; //付款记录id
        this.type = this.$route.query.type; //查看类型
        if (this.type == 1) {
            this.titleText = '新增';
            this.getCateList();
        } else if (this.type == 2) {
            this.judge = false;
            this.titleText = '编辑';
            this.initAjaxDetail();
        } else if (this.type == 3) {
            this.initAjaxDetail();
            this.judge = true;
            this.titleText = '查看';
        }
    },
    methods: {
        delVideo() {
            this.modelList.video_path.value = '';
        },
        getCateIds(e) {
            this.modelList.cate_id.value = Array.isArray(e) && e.length > 0 ? e[e.length - 1] : '';
        },
        tagInputMethod() {
            if (this.tagsVal.trim() !== '') {
                this.tags.push(this.tagsVal);
                this.tagsVal = '';
            }
            this.tagsShwo = false;
        },
        tagClose(index) {
            this.tags.splice(index, 1);
        },
        //保存
        preserve() {
            if (this.type == 1) {
                this.addAjaxMethod();
            } else if (this.type == 2) {
                this.editAjaxMethod();
            }
        },
        //取消
        cancel() {
            this.$router.push({ path: '/serve' });
        },
        //详细信息api
        initAjaxDetail() {
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.ARTICLE_DETAIL, { id: this.id })
                .then((res) => {
                    console.log('res', res);
                    loading.close();
                    if (res.code == 1) {
                        this.modelList.cover.value = res.data.cover;
                        this.modelList.title.value = res.data.title;
                        this.modelList.type.value = Number(res.data.type);
                        this.modelList.path.value = res.data.path;
                        this.modelList.video_path.value = res.data.video_path;
                        this.modelList.cate_id.value = res.data.cate_id;
                        this.modelList.recommend_type.value = Number(res.data.recommend_type);
                        this.modelList.sort.value = res.data.sort;
                        this.modelList.description.value = res.data.description;
                        this.modelList.content.value = res.data.content;
                        this.modelList.status.value = res.data.status == 0 ? false : true;
                        this.getCateList(res.data.cate_id);
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        getCateList(cate_id = null) {
            this.$http
                .get(api.ARTICLE_CATE)
                .then((res) => {
                    if (res.code == 1) {
                        this.cateList = Array.isArray(res.data) ? res.data : [];
                        if (cate_id) {
                            this.cateList.forEach((item) => {
                                if (Array.isArray(item.children)) {
                                    item.children.forEach((val) => {
                                        if (val.id == cate_id) {
                                            this.cateListIds = [val.parent_id, cate_id];
                                        }
                                    });
                                }
                            });
                        }
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        //编辑
        editAjaxMethod() {
            //验证
            let test = this.testMethod();
            if (!test.flag) {
                this.$message.error(test.msg);
                return false;
            } else {
                test.data.id = this.id;
            }
            console.log('test.data', test.data);
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.ARTICLE_EDIT, test.data)
                .then((res) => {
                    loading.close();
                    if (res.code == 1) {
                        this.$message.success('编辑成功');
                        setTimeout(() => {
                            this.$router.push({ path: '/article' });
                        }, 1000);
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        //新增api
        addAjaxMethod() {
            //验证
            let test = this.testMethod();
            console.log('test.data', test.data);
            if (!test.flag) {
                this.$message.error(test.msg);
                return false;
            }
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.ARTICLE_ADD, test.data)
                .then((res) => {
                    loading.close();
                    if (res.code == 1) {
                        this.$message.success('添加成功');
                        setTimeout(() => {
                            this.$router.push({ path: '/article' });
                        }, 1000);
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        //验证方法
        testMethod() {
            let flag = true,
                msg = '',
                data = {};
            this.modelList.content.value = this.$refs['myTextIntro'].getContent();
            for (let i in this.modelList) {
                if (this.modelList[i].request) {
                    if (!this.modelList[i].value || this.modelList[i].value == '') {
                        flag = false;
                        msg = this.modelList[i].placeholder;
                        break;
                    }
                }
            }
            if (flag) {
                data = {
                    cover: this.modelList.cover.value,
                    type: this.modelList.type.value,
                    path: this.modelList.path.value,
                    recommend_type: this.modelList.recommend_type.value,
                    video_path: this.modelList.video_path.value,
                    cate_id: this.modelList.cate_id.value,
                    title: this.modelList.title.value,
                    description: this.modelList.description.value,
                    content: this.modelList.content.value,
                    status: this.modelList.status.value == true ? 1 : 0,
                    sort: this.modelList.sort.value
                };
            }
            return { flag: flag, msg: msg, data: data };
        },
        videoHeaderSuccess(res, file) {
            this.videoLoading.close();
            if (res.code == 0) {
                this.$message({
                    type: 'warning',
                    message: res.msg
                });
                return false;
            }
            this.$message.success('上传成功');
            this.modelList.video_path.value = res.data;
        },
        videoHeaderUpload(file) {
            var FileExt = file.name.replace(/.+\./, '');
            if (['mp4', 'mpeg', 'mov', 'm4v', '3gp', 'avi', 'm3u8'].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message({
                    type: 'warning',
                    message: '请上传mp4、mpeg、mov、m4v、3gp、avi、m3u8文件！'
                });
                return false;
            }
            const fileSize = this.fileSize(file.size, 'm', 50);
            if (fileSize.code == 0) {
                this.$message({
                    type: 'warning',
                    message: fileSize.msg
                });
                return false;
            }
            this.videoLoading = this.$loading({ text: '上传中...' });
        },
        fileSize(fileSize, unit, size = 0) {
            let total = 0;
            if (unit == 'm') {
                total = fileSize / 1024 / 1024;
            } else if (unit == 'kb') {
                total = fileSize / 1024;
            }
            if (total > size) {
                return { code: 0, msg: '文件大小请控制在' + size + unit + '以内!' };
            }
            return { code: 1 };
        }
    }
};
</script>


<style scoped>
.list-title {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #333;
}
.list-group {
    padding: 10px 0;
}
.del-video-btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
}
h2 {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
}
h2:after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #409eff;
}
.map-group {
    position: relative;
}
.map-search {
    display: flex;
    align-items: center;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 10px;
    width: 400px;
    background: #fff;
    z-index: 300;
}
.map-search input {
    height: 40px;
    border: 1px solid #eee;
    font-size: 14px;
    color: #888;
    flex-grow: 1;
    outline: none;
}
.serarch-result {
    position: absolute;
    top: 55px;
    left: 0;
    right: 0;
    box-shadow: 1px 1px 4px -3px #000;
    background-color: #fff;
    max-height: 300px;
}
.serarch-list {
    border-bottom: 1px solid #eee;
}
.serarch-list:hover {
    cursor: pointer;
    background-color: #eee;
}
.serarch-rows {
    display: flex;
    padding: 6px 10px;
    font-size: 14px;
    color: #333;
    align-items: center;
}
.serarch-rows span:nth-child(1) {
    margin-right: 10px;
}
</style>
